<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <title>用户登录</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/css/index.css" rel="stylesheet"/>
    <link href="/css/common.css" rel="stylesheet"/>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="main">
    <div class="form">
        <form>
            <div class="mb-3">
                <label for="username" class="form-label">用户名</label>
                <input type="email" class="form-control" id="username" autocomplete="off">
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">密码</label>
                <input type="password" class="form-control" id="password" autocomplete="off">
            </div>
            <div class="input-group mb-3">
                <label for="code" class="input-group-text">验证码</label>
                <input type="text" class="form-control" id="code" placeholder="不区分大小写" autocomplete="off">
                <img class="input-group-text qr-img" src="/getQrcode" id="imgQrcode" onclick="refreshQr()"/>
            </div>
            <button type="button" class="btn btn-primary w-100" onclick="doLogin()">登录</button>
            <div class="text-end text-small text-muted mt-2 pointer" onclick="toReg()">没有账号？立即注册</div>
        </form>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>
<script>
    function refreshQr(){
        let r = Math.random();
        $("#imgQrcode").attr('src', '/getQrcode?randomStr='+r)
    }

    function toReg() {
        location.href = "/register.jsp"
    }

    function doLogin() {
        // 获取用户输入参数
        let username = $('#username').val();
        let password = $('#password').val();
        let code = $('#code').val();

        // 参数校验
        let len_usr = username.length;
        let len_pwd = password.length;
        if (code === "") {
            alert('验证码不能为空');
            return;
        }
        if (len_usr === "") {
            alert('用户名不能为空');
            return;
        }
        if (len_pwd === "") {
            alert('密码不能为空');
            return;
        }

        $.ajax({
            url: '/user?action=login',
            type: 'POST',
            data: {
                username: username,
                password: password,
                code: code
            },
            success: function (response) {
                if (response.code === 0) {
                    alert('登录成功');
                    // 跳转到主页
                    location.href = '/main.jsp'
                } else {
                    // 登录失败打印后端设置的消息
                    alert(response.msg);
                }

                // 刷新验证码
                refreshQr();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // 登录失败处理逻辑
                alert('未知异常');
                // 刷新验证码
                refreshQr();
            }
        });

    }
</script>
</body>
</html>
